import Link from "next/link";
import { notFound } from "next/navigation";

// 模拟博客文章数据
const blogPosts = {
  "jamstack-advantages": {
    id: 1,
    title: "JAMstack 架构的优势",
    date: "2024-01-15",
    category: "架构",
    readTime: "5 分钟",
    content: `
      <p>JAMstack 是一种现代 Web 开发架构，它代表 JavaScript、API 和 Markup 的组合。这种架构正在改变我们构建 Web 应用的方式。</p>
      
      <h2>什么是 JAMstack？</h2>
      <p>JAMstack 的核心思想是将前端和后端分离，通过预构建的静态文件提供服务，并通过 API 获取动态数据。</p>
      
      <h2>主要优势</h2>
      <h3>1. 性能卓越</h3>
      <p>静态文件可以部署到全球 CDN，为用户提供极快的加载速度。没有服务器端处理，减少了延迟。</p>
      
      <h3>2. 安全性更高</h3>
      <p>静态文件没有服务器端漏洞，攻击面大大减少。没有数据库连接，降低了安全风险。</p>
      
      <h3>3. 开发体验优秀</h3>
      <p>开发者可以使用现代工具链，享受更好的开发体验。版本控制和部署流程更加简单。</p>
      
      <h3>4. 成本效益</h3>
      <p>静态文件托管成本低，可以轻松扩展到全球用户。</p>
      
      <h2>JAMstack 生态系统</h2>
      <p>JAMstack 生态系统包括各种工具和服务：</p>
      <ul>
        <li>静态站点生成器：Next.js、Gatsby、Nuxt.js</li>
        <li>无头 CMS：Contentful、Strapi、Sanity</li>
        <li>API 服务：Vercel、Netlify Functions、AWS Lambda</li>
        <li>CDN 和托管：Vercel、Netlify、AWS CloudFront</li>
      </ul>
      
      <p>JAMstack 代表了 Web 开发的未来趋势，它提供了更好的性能、安全性和开发体验。如果你还没有尝试过 JAMstack，现在是开始的好时机。</p>
    `
  },
  "nextjs-ssg-best-practices": {
    id: 2,
    title: "Next.js 静态站点生成最佳实践",
    date: "2024-01-10",
    category: "技术",
    readTime: "8 分钟",
    content: `
      <p>Next.js 提供了强大的静态站点生成（SSG）功能，让开发者能够构建高性能的静态网站。</p>
      
      <h2>getStaticProps 和 getStaticPaths</h2>
      <p>这两个函数是 Next.js SSG 的核心。getStaticProps 用于在构建时获取数据，getStaticPaths 用于定义动态路由的页面。</p>
      
      <h2>最佳实践</h2>
      <h3>1. 数据获取优化</h3>
      <p>在 getStaticProps 中获取所有必要的数据，避免客户端请求。使用增量静态再生（ISR）来处理动态内容。</p>
      
      <h3>2. 图片优化</h3>
      <p>使用 Next.js 的 Image 组件来自动优化图片，支持 WebP 格式和响应式图片。</p>
      
      <h3>3. 代码分割</h3>
      <p>Next.js 自动进行代码分割，但可以通过动态导入进一步优化。</p>
      
      <h3>4. SEO 优化</h3>
      <p>使用 Next.js 的 Head 组件来管理页面元数据，确保良好的 SEO 表现。</p>
    `
  },
  "tailwind-design-system": {
    id: 3,
    title: "Tailwind CSS 设计系统",
    date: "2024-01-05",
    category: "设计",
    readTime: "6 分钟",
    content: `
      <p>Tailwind CSS 是一个实用优先的 CSS 框架，它提供了构建现代用户界面的工具。</p>
      
      <h2>设计系统的重要性</h2>
      <p>一个良好的设计系统可以确保产品的一致性和可维护性。</p>
      
      <h2>使用 Tailwind 构建设计系统</h2>
      <h3>1. 颜色系统</h3>
      <p>定义一套一致的颜色调色板，用于不同的 UI 状态和组件。</p>
      
      <h3>2. 间距系统</h3>
      <p>使用 Tailwind 的间距工具类来创建一致的布局。</p>
      
      <h3>3. 组件库</h3>
      <p>构建可复用的组件库，提高开发效率。</p>
    `
  },
  "api-routes-serverless": {
    id: 4,
    title: "API 路由与无服务器函数",
    date: "2024-01-01",
    category: "后端",
    readTime: "7 分钟",
    content: `
      <p>Next.js 的 API 路由功能让开发者能够构建全栈应用，无需额外的后端服务。</p>
      
      <h2>API 路由基础</h2>
      <p>API 路由文件位于 pages/api 目录下，每个文件都是一个 API 端点。</p>
      
      <h2>无服务器函数</h2>
      <p>Next.js API 路由在部署时自动转换为无服务器函数，提供自动扩展和按需计费。</p>
      
      <h2>最佳实践</h2>
      <h3>1. 错误处理</h3>
      <p>实现适当的错误处理和状态码返回。</p>
      
      <h3>2. 数据验证</h3>
      <p>使用库如 Zod 或 Yup 来验证输入数据。</p>
      
      <h3>3. 安全性</h3>
      <p>实施适当的身份验证和授权机制。</p>
    `
  }
};

interface BlogPostPageProps {
  params: Promise<{
    slug: string;
  }>;
}

export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const { slug } = await params;
  const post = blogPosts[slug as keyof typeof blogPosts];

  if (!post) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-4xl mx-auto px-4 py-12">
        <div className="mb-8">
          <Link 
            href="/blog"
            className="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium mb-6"
          >
            <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            返回博客
          </Link>
        </div>

        <article className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-8">
            <div className="flex items-center gap-4 mb-6">
              <span className="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
                {post.category}
              </span>
              <span className="text-gray-500 text-sm">{post.date}</span>
              <span className="text-gray-500 text-sm">{post.readTime}</span>
            </div>
            
            <h1 className="text-4xl font-bold text-gray-900 mb-6">
              {post.title}
            </h1>
            
            <div 
              className="prose prose-lg max-w-none text-gray-700"
              dangerouslySetInnerHTML={{ __html: post.content }}
            />
          </div>
        </article>

        <div className="mt-12 text-center">
          <Link 
            href="/blog"
            className="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
          >
            查看更多文章
          </Link>
        </div>
      </div>
    </div>
  );
}

// 生成静态路径
export async function generateStaticParams() {
  return Object.keys(blogPosts).map((slug) => ({
    slug,
  }));
}
